<template>
  <div v-if="!$route.meta.fullScreen" id="nav">
    <!--    <header-mock-up />-->
    <!--    <v-content fill-height fluid>-->
    <!--      <div style="min-height: calc(100vh - 65px - 75px);background-color: #eff2f4;">-->
    <!--        <router-view />-->
    <!--      </div>-->
    <!--    </v-content>-->
    <header-mock-up v-if="$route.fullPath === '/home'" />
    <HeaderDetail
      v-if="
        $route.fullPath === '/designLibrary' ||
          $route.fullPath === '/sequenceDesign' ||
          $route.fullPath === '/sequenceSave' ||
          $route.fullPath === '/mulSequenceDesign' ||
          $route.fullPath === '/requestManagement' ||
          $route.fullPath === '/addRequestRecord' ||
          $route.fullPath === '/sequenceManagement' ||
          $route.fullPath === '/addSequenceRecord' ||
          $route.fullPath === '/sequenceRecordDetails'||
          $route.fullPath === '/requestRecordDetails'||
          $route.fullPath === '/sequenceImport'||
          $route.fullPath === '/addNewVersion'"
    />
    <el-config-provider :size="size" :z-index="zIndex">
      <router-view />
    </el-config-provider>
    <Footer />
  </div>
  <div v-else>
    <header-mock-up v-if="$route.fullPath === '/home'" />
    <HeaderDetail
      v-if="
        $route.fullPath === '/designLibrary' ||
          $route.fullPath === '/sequenceDesign' ||
          $route.fullPath === '/sequenceSave' ||
          $route.fullPath === '/mulSequenceDesign' ||
          $route.fullPath === '/requestManagement' ||
          $route.fullPath === '/addRequestRecord' ||
          $route.fullPath === '/sequenceManagement' ||
          $route.fullPath === '/addSequenceRecord' ||
          $route.fullPath === '/sequenceRecordDetails'||
          $route.fullPath === '/requestRecordDetails'||
          $route.fullPath === '/sequenceImport'||
          $route.fullPath === '/addNewVersion'"
    />
    <router-view />
    <!--    <Footer />-->
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted } from "vue";
import HeaderMockUp from "./components/HeaderMockUp.vue";
import HeaderDetail from "./components/HeaderDetail.vue";
import Footer from "./views/Footer.vue";
export default defineComponent({
  components: {
    HeaderMockUp,
    HeaderDetail
  },
  setup() {
    return {
      zIndex: 3000,
      size: "small",
    };
  },
});
</script>
<style>
html,
body,
#app {
  background-color: #eff2f4;
}
</style>
